<!--
 * @Author: liqi
 * @Date: 2022-10-15 21:44:13
 * @LastEditors: liqi
 * @LastEditTime: 2022-10-16 13:46:33
 * @Description:
-->
<template>
  <!-- 订单管理 -->
  <!-- Tabs 标签页 -->
  <div>
    <!-- 第一部分 标签选项卡 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="所有订单" />
      <el-tab-pane label="待支付" name="待支付" />
      <el-tab-pane label="待派单" name="待派单" />
      <el-tab-pane label="待接单" name="待接单" />
      <el-tab-pane label="待服务" name="待服务" />
      <el-tab-pane label="待确认" name="待确认" />
      <el-tab-pane label="已完成" name="已完成" />
    </el-tabs>
    <!-- 第一部分结束 标签选项卡 -->
    <!-- 第二部分 表格数据 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="订单编号" align="center" />
      <el-table-column prop="orderTime" label="下单时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.orderTime | fmtDate1 }}
        </template>
      </el-table-column>
      <el-table-column prop="total" label="总价" align="center">
        <template slot-scope="scope">
          <span>￥<span class="money">{{ scope.row.total }}</span>元</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status === '待派单'"
            type="success"
          >待派单</el-tag>
          <el-tag
            v-else-if="scope.row.status === '待服务'"
            type="info"
          >待服务</el-tag>
          <el-tag
            v-else-if="scope.row.status === '待支付'"
            type="info"
          >待支付</el-tag>
          <el-tag
            v-else-if="scope.row.status === '待确认'"
            type="info"
          >待确认</el-tag>
          <el-tag
            v-else-if="scope.row.status === '已完成'"
            type="info"
          >已完成</el-tag>
          <el-tag
            v-else-if="scope.row.status === '待接单'"
            type="warning"
          >待接单</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="customerId" label="顾客ID" align="center" />
      <el-table-column v-if="activeName!=&quot;待派单&quot; && activeName!=&quot;待支付&quot;" prop="employeeId" label="员工ID" align="center">
        <template slot-scope="scope">
          <span v-if="!scope.row.employeeId">--</span>
          <span v-else>{{ scope.row.employeeId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <a href="#" class="detail" @click="toDetail(scope.row)">详情</a>
          <a
            v-if="scope.row.status === '待派单'"
            href="#"
            class="send"
            @click.prevent="toSend(scope.row.id)"
          >派单</a>
          <a
            v-else-if="scope.row.status === '待接单'"
            href="#"
            class="noSend"
            @click.prevent="cancelSend(scope.row.id)"
          >取消派单</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 第二部分结束 表格数据 -->
    <!-- 模态框 -->
    <el-dialog title="派单" :visible.sync="visible">
      <el-radio-group v-model="form.waiterId" size="small">
        <el-radio v-for="item in employeeData" :key="item.id" class="employee" :label="item.id" border>{{ item.username }} {{ item.realname }}</el-radio>
      </el-radio-group>
      <!-- {{form}} -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="toOrderSend"
        >确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
    <!-- 第三部分 分页按钮 -->
    <el-pagination
      :current-page="params.page"
      :page-sizes="[5, 6, 8, 10, 15, 20]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="page"
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 第三部分结束 分页按钮 -->
  </div>
</template>
<script>
import { get, post } from '@/utils/request.js'
export default {
  data() {
    return {
      activeName: '所有订单',
      params: {
        page: 1,
        pageSize: 10
      },
      // 表格数据
      tableData: [],
      // 总条数
      total: 0,
      // 派单员工
      form: {},
      // 模态框显示/隐藏
      visible: false,
      // 员工
      employeeData: []
    }
  },
  created() {
    this.handleClick()
    this.getAllEmployee()
  },
  methods: {
    // 跳转详情页
    toDetail(row) {
      this.$router.push({
        path: '/admin/order/Details',
        query: row
      })
    },
    // 获取所有员工信息
    async getAllEmployee() {
      const res = await get('/baseUser/pageQuery', { page: 1, pageSize: 10, roleId: 1 })
      this.employeeData = res.data.list
    },
    // 取消派单
    async cancelSend(id) {
      const res = await get('/order/cancelSendOrder', { orderId: id })
      this.$message({
        message: res.message,
        type: 'success'
      })
      this.handleClick()
    },
    // 点击派单
    toSend(id) {
      this.visible = true
      this.form.orderId = id
    },
    // 点击确定，开始派单
    async toOrderSend() {
      const res = await get('/order/sendOrder', this.form)
      this.$message({
        type: 'success',
        message: res.message
      })
      this.visible = false
      this.handleClick()
    },
    // 获取表格数据
    async handleClick(tab, event) {
      // console.log(tab, event);
      if (this.activeName !== '所有订单') {
        this.params.status = this.activeName
      } else {
        delete this.params.status
      }
      const res = await get('/order/pageQuery', this.params)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    // 分页
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.params.page = 1
      this.handleClick()
    },
    handleCurrentChange(page) {
      this.params.page = page
      this.handleClick()
    }
  }
}
</script>

<style scoped>
.money {
  color: #e65d6e;
  font-size: 18px;
  margin: 0 5px;
}
.page {
  margin-top: 10px;
}
.detail {
  margin-right: 10px;
}
.send {
  color: #30b08f;
}
.noSend {
  color: #ffba00;
}
a:hover {
  color: #30b08f;
}
.employee{
  margin-bottom: 15px;
}
</style>
